<script setup>
	import config from './config'
	import { cloneDeep } from 'lodash-es'
	import datasetApi from '@/views/plugin/dashboard/api/datasetApi'
	import { designStore } from '@/views/plugin/dashboard/store'
	const useDesignStore = designStore()
	const props = defineProps({
		config: {
			type: Object,
			default: () => config
		}
	})
	// 数据源
	const dataSource = ref([])
	const container = computed(() => ({
		padding: `${props.config.style.paddingT}px ${props.config.style.paddingR}px ${props.config.style.paddingB}px ${props.config.style.paddingL}px`,
		background: props.config.style.bgColor,
		borderColor: props.config.style.borderColor,
		borderWidth: props.config.style.borderWidth + 'px',
		borderStyle: props.config.style.borderStyle,
		borderTopLeftRadius: props.config.style.bgRTL + 'px',
		borderTopRightRadius: props.config.style.bgRTR + 'px',
		borderBottomLeftRadius: props.config.style.bgRBL + 'px',
		borderBottomRightRadius: props.config.style.bgRBR + 'px',
		boxShadow: `${props.config.style.shadowX}px ${props.config.style.shadowY}px ${props.config.style.shadowDegree}px ${props.config.style.shadowColor}`
	}))
	const titleIconStyle = computed(() => ({
		fontSize: props.config.style.titleIconSize + 'px',
		color: props.config.style.titleIconColor
	}))
	const titleEndStyle = computed(() => ({
		fontSize: props.config.style.titleEndSize + 'px',
		color: props.config.style.titleEndColor,
		fontWeight: props.config.style.titleEndWeight ? 800 : 500,
		fontStyle: props.config.style.titleEndStyle ? 'italic' : '',
		textDecoration: props.config.style.titleEndLine ? 'underline' : ''
	}))
	const titleEndIconStyle = computed(() => ({
		fontSize: props.config.style.titleEndIconSize + 'px',
		color: props.config.style.titleEndIconColor
	}))
	const titleStyle = computed(() => ({
		justifyContent: props.config.style.align,
		fontSize: props.config.style.titleSize + 'px',
		color: props.config.style.titleColor,
		fontWeight: props.config.style.titleWeight ? 800 : 500,
		fontStyle: props.config.style.titleStyle ? 'italic' : '',
		textDecoration: props.config.style.titleLine ? 'underline' : ''
	}))
	const pagination = computed(() => {
		return props.config.style.pagination && { pageSize: props.config.style.pageSize }
	})
	// 接数据源

	const dataSet = reactive(cloneDeep(config.data))
	// 组件绑定数据 静态 / 数据源
	const formState = computed(() => {
		if (props.config.dataSetConfig.dataSetType === 1) {
			return dataSet
		} else {
			return props.config.data
		}
	})
	// 下拉 --- 调接口
	watch(
		() => props.config.dataSetConfig.dataSetId,
		(newVal) => {
			if (props.config.dataSetConfig.dataSetType === 1 && newVal) {
				dataSet.columns.value = []
				newVal.forEach((element) => {
					let title = element
					// 如果dataSetFields配置了别名
					props.config.dataSetConfig.dataSetFields.forEach((item) => {
						if (item.field === element) {
							title = item.alias || element
						}
					})
					dataSet.columns.value.push({ title, key: element, dataIndex: element, ellipsis: true })
				})
				if (newVal.length > 0) {
					dataSet.listValue.value = dataSource.value || []
				} else {
					dataSet.listValue.value = []
				}
			}
		},
		{ deep: true, immediate: true }
	)

	watch(
		() => props.config.dataSetConfig.dataSetJson,
		(newVal, oldVal) => {
			const dataSetJson = props.config.dataSetConfig.dataSetJson
			const isNull = dataSetJson && !!Object.keys(dataSetJson).length
			if (props.config.dataSetConfig.dataSetType === 1 && isNull && newVal !== oldVal) {
				// 模拟接口返回下拉数据
				datasetApi.preview(props.config.dataSetConfig.dataSetJson).then((res) => {
					dataSource.value = res || []
					dataSet.listValue.value = res || []
				})
			}
		},
		{ deep: true, immediate: true }
	)
	// 表格高度
	const tableY = ref(300)
	watch(
		() => props.config.h,
		() => {
			nextTick(() => {
				const height = document.getElementById('box' + props.config.i)?.clientHeight
				const pagination = props.config.style.pagination ? 64 : 0
				const h = height - props.config.style.paddingT - props.config.style.paddingB - 55 - pagination
				if (h) {
					tableY.value = h
				}
			})
		},
		{ deep: true, immediate: true }
	)
</script>

<template>
	<div class="container" :style="container">
		<div
			class="flex justify-between mb-[15px]"
			:style="{ justifyContent: props.config.style.align }"
			v-if="props.config.style.titleShow"
		>
			<div class="flex items-center">
				<span
					:class="['mr-[8px]', 'iconfont', props.config.style.titleIcon]"
					:style="titleIconStyle"
					v-if="props.config.style.titleIconShow"
				></span>
				<div :style="titleStyle">{{ props.config.style.title }}</div>
			</div>
			<div v-if="props.config.style.align === 'space-between'" class="flex items-center">
				<div :style="titleEndStyle" v-if="props.config.style.titleEndShow">{{ props.config.style.titleEnd }}</div>
				<span
					:class="['ml-[8px]', 'iconfont', props.config.style.titleEndIcon]"
					:style="titleEndIconStyle"
					v-if="props.config.style.titleEndIconShow"
				></span>
			</div>
		</div>
		<a-table
			:dataSource="formState.listValue.value"
			:scroll="{ y: tableY }"
			:columns="formState.columns.value"
			:pagination="pagination"
		/>
	</div>
</template>

<style scoped lang="less">
	.container {
		padding: 20px; // 增加内边距
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	:deep(.ant-picker-calendar-date-content) {
		height: auto !important;
	}
	:deep(.ant-picker-calendar) {
		display: flex;
		flex-direction: column;
	}
	:deep(.ant-picker-panel) {
		flex: 1;
	}
	:deep(.ant-picker-date-panel) {
		height: 100%;
	}
	:deep(.ant-picker-body) {
		height: 100%;
	}
	:deep(.ant-picker-content) {
		height: 100%;
	}
</style>
